<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>助力好友 达成心愿</title>
    <link rel="stylesheet" href="../themes/mall/default/styles/share/css/hui.css">
    <link rel="stylesheet" href="../themes/mall/default/styles/share/css/style.css">
    <script src="/mobile/themes/mall/default/styles/share/js/com.js"></script>
    <script src="/mobile/themes/mall/default/styles/share/js/hui.js"></script>
    <script src="/mobile/themes/mall/default/styles/share/js/template-web.js"></script>
    <script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <style type="text/css">
        .clear:after{clear: both;content:'';display: block;}
        .fl{float: left;}
        .fr{float: right;}

        .progressp{padding: 20px;margin-top: -40px;}
        .progressp .tip{padding: 4px 6px;border:1px solid #333;font-size: 12px;margin-left: auto;display: inline-block;border-radius: 50px;float: right;margin-bottom: 10px;}

        .progress .zuo{height: 8px;width: 20%;background: #ccc;border-radius: 4px;}
        .progress .selectstyle{background: #AF324B;height: 8px;border-radius: 4px;}
        .progress .you{height: 8px;width: 80%;background: #ccc;border-radius: 4px;position: relative;}

        #youzhi{position: relative;}
        #youzhi:after{content:'';display: block;width: 8px;height: 8px;background: #fff;border:1px solid #666;box-shadow: 0 0 4px #666;position: absolute;right: 0;top: -1px;border-radius: 50%;}
    </style>
</head>
<body>
<div style="background: url(/mobile/themes/mall/default/styles/share/img/back18.png) no-repeat center center;background-size: cover" class="w100per h100per" id="bgcontain">
    <div style="padding: 12px 0 0 18px">
    </div>

    <div id="contain"></div>
</div>

<script type="text/html" id="tpl">
    <div class="fs14 c333 txt_center" style="">
    </div>
    <div class="pad_l10 pad_r10 pad_b16">
        <div class="bdr8 pad_l10 pad_r10 bgcfff bd_allred">
            <div class="bd_b" style="padding: 14px 0;line-height: 28px; height:auto;">
                <div style="height: 350px;">
                    <h1>心愿单已取消</h1>
                </div>
                <div style="height: 350px;">
                    <div style="width: 100%;height: 240px;padding-top: 93px;">
                        <img style="width:100px;height: 73px;margin-left: 25px;margin-top: -63px;" src="../{$info.goodsSpecInfo.spec_1}" alt="">
                        <div style="position: absolute;float: right;margin: -90px 28px 0 150px;">
                            <font style="width:322px;height:90px;font-size:16px;font-family:PingFang SC;font-weight:400;line-height:1px;
color:rgba(0,0,0,1);">{$info.goodsInfo.goods_name}</font>
                        </div>
                        <div style="position: absolute;float: right;margin: -30px -38px 0 150px;">
                            <font style="width:385px;height:37px;font-size:14px;font-family:PingFang SC;font-weight:400;line-height:36px;color:rgba(153,153,153,1);opacity:1;">{$info.goodsSpecInfo.spec_1value} {$info.goodsSpecInfo.spec_2}</font>
                        </div>
                        <div style="position: absolute;float: right;margin: -7px -38px 0 150px;">
                            <font style="width:385px;height:37px;font-size:14px;font-family:PingFang SC;font-weight:400;line-height:36px;color:rgba(153,153,153,1);opacity:1;">商品售价：￥{$info.goodsSpecInfo.price}</font>


                        </div>
                        <hr style="position: absolute;margin-top:80px;margin-left: 20px; width:80%;height:0px;border:1px dashed rgba(251,203,210,1);"/>

                    </div>
                    <!--<hr style="float:left;width:20%;border:4px solid #ef4f4f;border-radius:8px;margin-top: 46px;margin-left: 55px;"/>-->
                    <!--<hr style="float:left;width:50%;border:4px solid #ef4f4f;border-radius:8px;margin-top: 46px;"/>-->

                </div>
            </div>

        </div>
    </div>
</script>
<script>

    $(function () {
        // 页面加载完毕获取图片的宽度和高度
        $(window).load(function () {
            let w = $('#help_img').width();
            let h = $('#help_img').height();

            $('#help_p').css({
                "width": w + 'px',
                "height": w + 'px',
                "line-height": h + 'px',
                'left': 0,
            });
        });

    });
</script>
</body>
</html>